<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="水果id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="水果名字"
                width="120">
        </el-table-column>
        <el-table-column
                prop="sale"
                label="销量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="icon"
                label="图片"
                width="120">
            <template slot-scope="scope">
                <img :src="scope.row.icon" style="height: 70px"/>
            </template>
        </el-table-column>

        <el-table-column
                label="操作"
                width="300">
            <template slot-scope="scope">
                <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="FindFruit(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="AddFruit(scope.row)" type="text" size="small">添加</el-button>
                <el-button @click="bar()" type="text" size="small">柱状图统计</el-button>
                <el-button @click="pie()" type="text" size="small">饼状图统计</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        methods: {
            fruitDelete(row) {
                let _this=this;
                this.$confirm('此操作将永久删除'+ row.name+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("http://localhost:8181/fruit/delete/"+ row.id).then(function (response) {
                        if(response.data){
                            _this.$alert(row.name+'删除成功！','删除数据',{
                                confirmButtonText: '确定',
                                callback:action => {
                                    /*重新加载页面*/
                                    location.reload()
                                }
                          });

                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
               },
            FindFruit(row) {
                this.$router.push("/edit?id="+row.id)
            },
            AddFruit(){
                this.$router.push("/add")
            },
            bar() {
                this.$router.push("/bar")
            },
            pie() {
                this.$router.push("/pie")
            }
        },
        created() {
            let _this=this
            axios.get("http://localhost:8181/fruit/list").then(function (response) {
                _this.tableData=response.data;

            });
        },
        data() {
            return {
                tableData: null
            }
        }
    }
</script>
